<template>
  <el-dialog
    :title="form.id ? '编辑' : '新增'"
    v-model="visible"
    :close-on-click-modal="false"
    draggable
    width="60%"
  >
    <el-form
      ref="dataFormRef"
      :model="form"
      :rules="dataRules"
      formDialogRef
      v-loading="loading"
      label-width="100"
    >
      <el-row :gutter="24">
        <el-col :span="12" class="mb20">
          <el-form-item label="林地宗地号" prop="forestLandParcelNumber">
            <el-input
              v-model="form.forestLandParcelNumber"
              placeholder="请输入林地宗地号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="林权证号" prop="forestNumber">
            <el-input v-model="form.forestNumber" placeholder="请输入林权证号" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="不动产单元号" prop="realEstateUnitNumber">
            <el-input
              v-model="form.realEstateUnitNumber"
              placeholder="请输入不动产单元号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="面积（亩）" prop="squareMeasure">
            <el-input-number v-model="form.squareMeasure" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="坐落" prop="locatedInTheCounty">
            <el-input
              v-model="form.locatedInTheCounty"
              placeholder="请输入坐落县"
              style="width: 20%"
            />
            <el-input
              v-model="form.sittingVillagetownstreet"
              placeholder="请输入坐落乡/镇/街道"
              style="width: 20%"
            />
            <el-input
              v-model="form.locatedVillage"
              placeholder="请输入坐落村"
              style="width: 20%"
            />
            <el-input
              v-model="form.locationGroup"
              placeholder="请输入坐落组"
              style="width: 20%"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="林种" prop="forestCategory">
            <el-radio-group v-model="form.forestCategory">
              <el-radio
                :label="item.value"
                v-for="(item, index) in forest_category"
                :key="index"
                >{{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-tabs class="demo-tabs" type="border-card" v-model="activeName">
        <el-tab-pane label="林地所有权" name="first">
          <template #label>
            <span class="label-title">林地所有权</span>
          </template>
          <el-row :gutter="24">
            <el-col :span="12" class="mb20">
              <el-form-item label="权利人" prop="forestHolder">
                <el-input
                  v-model="form.forestHolder"
                  placeholder="请输入林地所有权权利人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="证件号码" prop="forestHolders">
                <el-input v-model="form.forestHolders" placeholder="请输入证件号码" />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="经办机构" prop="forestAgency">
                <el-input
                  v-model="form.forestAgency"
                  placeholder="请输入林地所有权经办机构"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20" v-if="false">
              <el-form-item label="经办材料" prop="materialsOwnership">
                <el-input
                  v-model="form.materialsOwnership"
                  placeholder="请输入林地所有权经办材料"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="林地使用权" name="second">
          <template #label>
            <span class="label-title">林地使用权</span>
          </template>
          <el-row :gutter="24">
            <el-col :span="12" class="mb20">
              <el-form-item label="权利人" prop="rightMountain">
                <el-input
                  v-model="form.rightMountain"
                  placeholder="请输入林地使用权（自留山）权利人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="身份证号码" prop="useRightHolderPrivateMountain">
                <el-input
                  v-model="form.useRightHolderPrivateMountain"
                  placeholder="请输入林地使用权权力人（自留山）身份证号码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="使用权起日" prop="startingDate">
                <el-date-picker
                  type="date"
                  placeholder="请选择林地使用权（自留山）起日期"
                  v-model="form.startingDate"
                  :value-format="dateStr"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="使用权止日" prop="endDate">
                <el-date-picker
                  type="date"
                  placeholder="请选择林地使用权（自留山）止日期"
                  v-model="form.endDate"
                  :value-format="dateStr"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="经办机构" prop="forestUseAgency">
                <el-input
                  v-model="form.forestUseAgency"
                  placeholder="请输入林地使用权经办机构"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20" v-if="false">
              <el-form-item label="经办材料" prop="materialsHandlingRights">
                <el-input
                  v-model="form.materialsHandlingRights"
                  placeholder="请输入林地使用权经办材料"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="林地承包经营权" name="third">
          <template #label>
            <span class="label-title">林地承包经营权</span>
          </template>
          <el-row :gutter="24">
            <el-col :span="12" class="mb20">
              <el-form-item label="权利人" prop="rightRights">
                <el-input
                  v-model="form.rightRights"
                  placeholder="请输入林地承包经营权权利人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="身份证号码" prop="forestManagementRight">
                <el-input
                  v-model="form.forestManagementRight"
                  placeholder="请输入林地承包经营权权利人身份证号码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="统一社会信用代码" prop="forestManagementRights">
                <el-input
                  v-model="form.forestManagementRights"
                  placeholder="请输入林地承包经营权权利人统一社会信用代码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="起始日期" prop="startingDateManagement">
                <el-date-picker
                  type="date"
                  placeholder="请选择林地承包经营权起始日期"
                  v-model="form.startingDateManagement"
                  :value-format="dateStr"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="终止日期" prop="terminationDateRight">
                <el-date-picker
                  type="date"
                  placeholder="请选择林地承包经营权终止日期"
                  v-model="form.terminationDateRight"
                  :value-format="dateStr"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="经办机构" prop="forestLandContractingAuthority">
                <el-input
                  v-model="form.forestLandContractingAuthority"
                  placeholder="请输入林地承包权经办机构"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20" v-if="false">
              <el-form-item label="经办材料" prop="ldcbqjbcl">
                <el-input
                  v-model="form.ldcbqjbcl"
                  placeholder="请输入林地承包权经办材料"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="林木所有权" name="four">
          <template #label>
            <span class="label-title">林木所有权</span>
          </template>
          <el-row :gutter="24">
            <el-col :span="12" class="mb20">
              <el-form-item label="权利人" prop="lbsyqlr">
                <el-input v-model="form.lbsyqlr" placeholder="请输入林木所有权权利人" />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="身份证号码" prop="ljsyqlrsfzh">
                <el-input
                  v-model="form.ljsyqlrsfzh"
                  placeholder="请输入林木所有权权利人身份证号码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="统一社会信用代码" prop="lmsyqqlrxyhdm">
                <el-input
                  v-model="form.lmsyqqlrxyhdm"
                  placeholder="请输入林木所有权权利人统一社会信用代码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="经办机构" prop="lbsyqjbjg">
                <el-input
                  v-model="form.lbsyqjbjg"
                  placeholder="请输入林木所有权经办机构"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20" v-if="false">
              <el-form-item label="经办材料" prop="lmsyqjbcl">
                <el-input
                  v-model="form.lmsyqjbcl"
                  placeholder="请输入林木所有权经办材料"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="林木使用权" name="five">
          <template #label>
            <span class="label-title">林木使用权</span>
          </template>
          <el-row :gutter="24">
            <el-col :span="12" class="mb20">
              <el-form-item label="权利人" prop="lmsyqqlr">
                <el-input v-model="form.lmsyqqlr" placeholder="请输入林木使用权权利人" />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="身份证号码" prop="lmsyqqlrsfzh">
                <el-input
                  v-model="form.lmsyqqlrsfzh"
                  placeholder="请输入林木使用权权利人身份证号码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="统一社会信用代码" prop="lmsyqqhrxydm">
                <el-input
                  v-model="form.lmsyqqhrxydm"
                  placeholder="请输入林木使用权权利人统一社会信用代码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20">
              <el-form-item label="经办机构" prop="lmsyqjbjg">
                <el-input
                  v-model="form.lmsyqjbjg"
                  placeholder="请输入林木使用权经办机构"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12" class="mb20" v-if="false">
              <el-form-item label="经办材料" prop="lmsiyqjbcl">
                <el-input
                  v-model="form.lmsiyqjbcl"
                  placeholder="请输入林木使用权经办材料"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="其他信息" name="six">
        <el-row :gutter="24">
          <el-col :span="12" class="mb20">
            <el-form-item label="状态" prop="state">
              <el-input v-model="form.state" placeholder="请输入状态" />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="照片" prop="photo">
              <el-input v-model="form.photo" placeholder="请输入照片" />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="保险产品" prop="insuranceProducts">
              <el-input v-model="form.insuranceProducts" placeholder="请输入保险产品" />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="最新评估报告" prop="latestEvaluationReport">
              <el-input
                v-model="form.latestEvaluationReport"
                placeholder="请输入最新评估报告"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="评估金额" prop="evaluateTheAmount">
              <el-input v-model="form.evaluateTheAmount" placeholder="请输入评估金额" />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="抵押阈值金额" prop="mortgageThresholdAmount">
              <el-input
                v-model="form.mortgageThresholdAmount"
                placeholder="请输入抵押阈值金额"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="林权证照" prop="forestOwnershipCertificate">
              <el-input
                v-model="form.forestOwnershipCertificate"
                placeholder="请输入林权证照"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="发证记录次数" prop="numberOfIssuanceRecords">
              <el-input
                v-model="form.numberOfIssuanceRecords"
                placeholder="请输入发证记录次数"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="抵押担编号" prop="mortgageGuaranteeNumber">
              <el-input
                v-model="form.mortgageGuaranteeNumber"
                placeholder="请输入抵押担编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="合同信息编号" prop="contractInformationNumber">
              <el-input
                v-model="form.contractInformationNumber"
                placeholder="请输入合同信息编号"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="户数" prop="households">
              <el-input v-model="form.households" placeholder="请输入户数" />
            </el-form-item>
          </el-col>
          <el-col :span="12" class="mb20">
            <el-form-item label="是否争议" prop="isThereADispute">
              <el-input v-model="form.isThereADispute" placeholder="请输入是否争议" />
            </el-form-item>
          </el-col>
        </el-row>
        </el-tab-pane>
      </el-tabs>
      <el-row :gutter="24" v-if="false">
        <el-col :span="12" class="mb20">
          <el-form-item label="审核人" prop="reviewer">
            <el-input v-model="form.reviewer" placeholder="请输入审核人" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="审核人编号" prop="auditorNumberAuditProcess">
            <el-input
              v-model="form.auditorNumberAuditProcess"
              placeholder="请输入审核人编号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="依据文件编号" prop="accordingToTheDocumentNumber">
            <el-input
              v-model="form.accordingToTheDocumentNumber"
              placeholder="请输入依据文件编号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="依据文件名称" prop="accordingToTheFileName">
            <el-input
              v-model="form.accordingToTheFileName"
              placeholder="请输入依据文件名称"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="loading">确 认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="ForestOwnershipInformationDialog">
// ========== 1. 导入语句 ==========
import { useDict } from "/@/hooks/dict";
import { rule } from "/@/utils/validate";
import { useMessage } from "/@/hooks/message";
import {
  getObj,
  addObj,
  putObj,
  validateExist,
} from "/@/api/forestry/forestOwnershipInformation";

// ========== 2. 组件定义 ==========
// 定义组件事件
const emit = defineEmits(["refresh"]);
const activeName = ref("first");
// ========== 3. 响应式数据定义 ==========
// 基础响应式变量
const dataFormRef = ref(); // 表单引用
const visible = ref(false); // 弹窗显示状态
const loading = ref(false); // 加载状态

// 表单数据对象
const form = reactive({
  id: "", // 主键
  forestLandParcelNumber: "", // 林地宗地号
  forestNumber: "", // 林权证号
  realEstateUnitNumber: "", // 不动产单元号
  locatedInTheCounty: "", // 坐落县
  sittingVillagetownstreet: "", // 坐落乡/镇/街道
  locatedVillage: "", // 坐落村
  locationGroup: "", // 坐落组
  forestHolder: "", // 林地所有权权利人
  forestHolders: "", // 林地所有权权利人统一社会信用代码
  forestAgency: "", // 林地所有权经办机构
  materialsOwnership: "", // 林地所有权经办材料
  forestSystem: "", // 林地所有权经办系统
  addressSystem: "", // 林地所有权经办系统地址
  rightMountain: "", // 林地使用权（自留山）权利人
  useRightHolderPrivateMountain: "", // 林地使用权权力人（自留山）身份证号码
  startingDate: "", // 林地使用权（自留山）起日期
  endDate: "", // 林地使用权（自留山）止日期
  forestUseAgency: "", // 林地使用权经办机构
  materialsHandlingRights: "", // 林地使用权经办材料
  forestHandlingSystem: "", // 林地使用权经办系统
  forestUseAddress: "", // 林地使用权经办查询地址
  rightRights: "", // 林地承包经营权权利人
  forestManagementRight: "", // 林地承包经营权权利人身份证号码
  forestManagementRights: "", // 林地承包经营权权利人统一社会信用代码
  startingDateManagement: "", // 林地承包经营权起始日期
  terminationDateRight: "", // 林地承包经营权终止日期
  forestLandContractingAuthority: "", // 林地承包权经办机构
  ldcbqjbcl: "", // 林地承包权经办材料
  ldcbqjbxt: "", // 林地承包权经办系统
  ljcbqjbcxdz: "", // 林地承包权经办查询地址
  lbsyqlr: "", // 林木所有权权利人
  ljsyqlrsfzh: "", // 林木所有权权利人身份证号码
  lmsyqqlrxyhdm: "", // 林木所有权权利人统一社会信用代码
  lbsyqjbjg: "", // 林木所有权经办机构
  lmsyqjbcl: "", // 林木所有权经办材料
  lmsyqjbxt: "", // 林木所有权经办系统
  lmsyqjbcxdz: "", // 林木所有权经办查询地址
  lmsyqqlr: "", // 林木使用权权利人
  lmsyqqlrsfzh: "", // 林木使用权权利人身份证号码
  lmsyqqhrxydm: "", // 林木使用权权利人统一社会信用代码
  lmsyqjbjg: "", // 林木使用权经办机构
  lmsiyqjbcl: "", // 林木使用权经办材料
  lmsiyqjbxt: "", // 林木使用权经办系统
  lmsiyqcxdz: "", // 林木使用权查询地址
  reviewer: "", // 审核人
  auditorNumberAuditProcess: "", // 审核人编号
  accordingToTheDocumentNumber: "", // 依据文件编号
  accordingToTheFileName: "", // 依据文件名称
  state: "", // 状态
  photo: "", // 照片
  insuranceProducts: "", // 保险产品
  latestEvaluationReport: "", // 最新评估报告
  evaluateTheAmount: "", // 评估金额
  mortgageThresholdAmount: "", // 抵押阈值金额
  forestOwnershipCertificate: "", // 林权证照
  numberOfIssuanceRecords: "", // 发证记录次数
  mortgageGuaranteeNumber: "", // 抵押担编号
  contractInformationNumber: "", // 合同信息编号
  households: "", // 户数
  isThereADispute: "", // 是否争议
});

// ========== 4. 字典数据处理 ==========
const {
  forest_category,
  record_state,
  transfer_way,
  transfer_type,
  trees_varieties,
  payment_way,
  ecological_obligation_inheritance,
  dispute_tackle_way,
  transfer_limitation,
} = useDict(
  "forest_category",
  "record_state",
  "transfer_way",
  "transfer_type",
  "trees_varieties",
  "payment_way",
  "ecological_obligation_inheritance",
  "dispute_tackle_way",
  "transfer_limitation"
);
// ========== 5. 表单校验规则 ==========
const dataRules = ref({
  forestLandParcelNumber: [
    { required: true, message: "林地宗地号不能为空", trigger: "blur" },
  ],
  forestNumber: [{ required: true, message: "林权证号不能为空", trigger: "blur" }],
  forestHolder: [
    { required: true, message: "林地所有权权利人不能为空", trigger: "blur" },
  ],
  rightMountain: [
    { required: true, message: "林地使用权（自留山）权利人不能为空", trigger: "blur" },
  ],
  rightRights: [
    { required: true, message: "林地承包经营权权利人不能为空", trigger: "blur" },
  ],
  lbsyqlr: [{ required: true, message: "林木所有权权利人不能为空", trigger: "blur" }],
  lmsyqqlr: [{ required: true, message: "林木使用权权利人不能为空", trigger: "blur" }],
});

// ========== 6. 方法定义 ==========
// 获取详情数据
const getForestOwnershipInformationData = async (id: string) => {
  try {
    loading.value = true;
    const { data } = await getObj({ id: id });
    // 直接将第一条数据赋值给表单
    Object.assign(form, data[0]);
  } catch (error) {
    useMessage().error("获取数据失败");
  } finally {
    loading.value = false;
  }
};

// 打开弹窗方法
const openDialog = (id: string) => {
  visible.value = true;
  form.id = "";

  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  // 获取ForestOwnershipInformation信息
  if (id) {
    form.id = id;
    getForestOwnershipInformationData(id);
  }
};

// 提交表单方法
const onSubmit = async () => {
  loading.value = true; // 防止重复提交

  // 表单校验
  const valid = await dataFormRef.value.validate().catch(() => {});
  if (!valid) {
    loading.value = false;
    useMessage().error('还有信息未填写完毕');
    return false;
  }

  try {
    // 根据是否有ID判断是新增还是修改
    form.id ? await putObj(form) : await addObj(form);
    useMessage().success(form.id ? "修改成功" : "添加成功");
    visible.value = false;
    emit("refresh"); // 通知父组件刷新列表
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};

// ========== 7. 对外暴露 ==========
// 暴露方法给父组件
defineExpose({
  openDialog,
});
</script>
<style scoped lang="scss"> 
.label-title::before{
  content: "*";
  color: var(--el-color-danger);
  margin-right: 4px;
}
</style>